import Taro from '@tarojs/taro';
import { MaterialIcons } from 'taro-icons';
import { View, Text } from '@tarojs/components';

import LicenseTags from '../LicenseTags';
import { CityBaseImage } from './cityBaseImage';
import type { CityBaseItem, baseTrafficItem } from '../../types/cityBase';


import './CityBaseList.scss';


interface cityBaseListProps {
  cityBaseList: CityBaseItem[];
  baseTrafficList?: {[key: number]: baseTrafficItem};
  baseLicenses?: {[key: string]: string[]};
  setSelectedCityBaseData?: (data: {base: CityBaseItem, baseLicense?: string[], traffic?: baseTrafficItem}) => void;
}

const CityBaseList: React.FC<cityBaseListProps> = ({ cityBaseList, baseTrafficList, baseLicenses, setSelectedCityBaseData }) => {
  // 处理基地卡片点击事件
  const handleBaseClick = (school: CityBaseItem) => {
    if (!setSelectedCityBaseData) {
      return;
    }
    setSelectedCityBaseData({
      base: school,
      baseLicense: baseLicenses?.[school.id] || [],
      traffic: baseTrafficList?.[school.id]
    });
    Taro.navigateTo({
      url: `/pages/base-detail/index?id=${school.id}`
    });
  };

  return (
    <View className="city-base-list">
      <View className="grid-layout">
        {cityBaseList.map((item) => (
          <View
            key={item.id}
            className="grid-item"
            onClick={() => handleBaseClick(item)}
          >
            <View className="base-item-container" style={{display: 'flex', width: '100%'}}>
              <View className="base-image-container">
                <CityBaseImage cityBase={item}/>
              </View>
              <View className="info-container">
              <View className="flex items-baseline justify-between" style={{ width: '100%' }}>
                  <Text className="city-base-name text-lg">{item.name}</Text>
                  <Text className="city-base-type text-sm">{item.baseType || '训练基地'}</Text>
                  {item.distance && item.distance > 0 && (
                    <Text className="distance-text text-md red-color">
                      {item.distance.toFixed(1)}km
                    </Text>
                  )}
              </View>
              
              <View className="city-address">
                {/* 地址信息 */}
                <MaterialIcons name="location-on" size={20} color="#7cb305"/>
                <Text numberOfLines={2} className="address-text">{item.address}</Text>
              </View>
              
              {baseTrafficList && baseTrafficList[item.id]?.trafficId && (
                <View className="traffic-info flex items-center mt-12">
                  <MaterialIcons name="directions-subway" size={20} color="#1890ff"/>
                  <Text className='traffic-text'>
                    {baseTrafficList[item.id].trafficId || ''} {baseTrafficList[item.id].station || ''}
                  </Text>
                </View>
              )}

              {/* 许可证信息 */}
              {baseLicenses?.[item.id]  && (
                <View className="license-info flex items-center mt-12">
                  <MaterialIcons name="directions-car" size={20} color="#fe5b20"/>
                  <LicenseTags licenseItems={baseLicenses?.[item.id] || []}/>
                </View>
              )}

              </View>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
}

export default CityBaseList;